<template>
  <el-dialog :title="$t('holidays.addTemplate')"
             :visible.sync="dialogVisible"
             :append-to-body="true"
             :close-on-click-modal="false"
             @open="opend"
             @close="closed"
             width="40%">
    <div style="padding:0 0 10px"
         v-loading="loading">
      <span style="margin-right:10px">{{$t('holidays.regionalHolidays')+':'}}</span>
      <el-select v-model="curTemplateId"
                 filterable
                 :placeholder="$t('holidays.select')"
                 style="width:80%">
        <el-option v-for="item in options"
                   :key="item.id"
                   :label="item.name"
                   :value="item.id">
        </el-option>
      </el-select>
    </div>
    <span slot="footer"
          class="dialog-footer">
      <el-button size="small"
                 type="info"
                 @click="dialogVisible=false">{{$t('holidays.cancel')}}</el-button>
      <el-button size="small"
                 type="primary"
                 @click="save">{{$t('holidays.save')}}</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data () {
    return {
      businessType: "Template",
      loading: false,
      dialogVisible: false,
      curTemplateId: null,
      options: []
    }
  },
  methods: {
    save () {
      if (!this.curTemplateId) {
        return this.$message.error('Please select Regional holidays.')
      } else {
        this.$emit('selectHolidays', this.curTemplateId)
      }
    },
    closed () {
      this.curTemplateId = null
    },
    async opend () {
      this.loading = true
      const params = {
        businessType: this.businessType
      }
      const { data: res } = await this.$interface.taskManager.holidayTree(params)
      this.loading = false
      if (res.code !== 0) {
        return this.$message.error(res.message)
      }
      // res.data.sort((a,b)=>a.name.localeCompare(b.name))
      // res.data.forEach(v=>v.festivalList.sort((a,b)=>a.name.localeCompare(b.name)))
      this.options = res.data
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
